<!--万能表单模块-->
<template>
    <div class="sea-page box">
        <smart-form-group ref="form" :model="model" :intercept="onSubmit" :trigger="trigger" :inline="true">
            <smart-form-layout name="text" label="文本" :rules="[{type: 'string', min: 3, max:5}]" require>
                <smart-text-view name="text" placeholder="this is placeholder" value="13123123"
                                 @change="onChange"></smart-text-view>
            </smart-form-layout>
            <smart-form-layout require hidden name="hidden" label="隐藏组件">
            </smart-form-layout>
            <smart-form-layout require name="number" label="数字">
                <smart-text-view name="number" type="number" placeholder="this is placeholder" value="3"
                                 @change="onChange"></smart-text-view>
            </smart-form-layout>
            <smart-form-layout require name="textarea" label="文本域">
                <smart-text-view name="textarea" type="textarea" placeholder="this is placeholder"
                                 @change="onChange"></smart-text-view>
            </smart-form-layout>
        </smart-form-group>
    </div>

    <!--    <smart-form-layout require name="switch" label="开关">-->
    <!--      <smart-switch name="switch" placeholder="this is placeholder" @change="onChange"></smart-switch>-->
    <!--    </smart-form-layout>-->
    <!--    <smart-form-layout require name="checkbox" label="勾选">-->
    <!--      <smart-checkbox name="checkbox" placeholder="this is placeholder" @change="onChange"></smart-checkbox>-->
    <!--    </smart-form-layout>-->

    <!--    <smart-form-layout require name="select" label="选择">-->
    <!--      <smart-select name="select" :value="1" :options="options" @change="onChange"-->
    <!--                    placeholder="this is placeholder"></smart-select>-->
    <!--    </smart-form-layout>-->
    <!--        <smart-form-layout require name="radio_group" label="单选">-->
    <!--          <smart-radio-group name="radio_group" :options="options" @change="onChange"-->
    <!--                             placeholder="this is placeholder"></smart-radio-group>-->
    <!--        </smart-form-layout>-->
    <!--        <smart-form-layout require name="checkbox_group" label="复选">-->
    <!--          <smart-checkbox-group name="checkbox_group" :options="options" @change="onChange"-->
    <!--                                placeholder="this is placeholder"></smart-checkbox-group>-->
    <!--        </smart-form-layout>-->

    <!--        <smart-form-layout require name="date" label="日期">-->
    <!--          <smart-date-picker name="date" placeholder="this is placeholder"></smart-date-picker>-->
    <!--        </smart-form-layout>-->
    <!--        <smart-form-layout require name="data_range" label="日期范围">-->
    <!--          <smart-date-range name="data_range" shortcuts-->
    <!--                            placeholder="this is placeholder,this is placeholder"></smart-date-range>-->
    <!--        </smart-form-layout>-->

    <!--    <smart-form-layout require name="tree" label="树">-->
    <!--      <smart-select-tree name="tree" placeholder="this is placeholder" :options="tree1" searchbar></smart-select-tree>-->
    <!--    </smart-form-layout>-->
    <!--    <smart-form-layout require name="chk-tree" label="复选树">-->
    <!--      <smart-check-tree style="width: 260px;" name="chk-tree" placeholder="this is placeholder" :options="tree2"-->
    <!--                        :value="[1]" searchbar></smart-check-tree>-->
    <!--    </smart-form-layout>-->

    <!--    <smart-form-layout require name="image" label="图片上传">-->
    <!--      <smart-image-uploader name="image" placeholder="this is placeholder" :limit="3"-->
    <!--                            value="e7f68debda904717a4f7cb9c7084fbae.png,f187ebe46515472abe52efcaa8fdb668.png"></smart-image-uploader>-->
    <!--    </smart-form-layout>-->
    <!--    <smart-form-layout require name="file" label="文件上传">-->
    <!--      <smart-file-uploader name="file" placeholder="this is placeholder"></smart-file-uploader>-->
    <!--    </smart-form-layout>-->

    <!--    <smart-form-layout require name="editor" label="富文本框">-->
    <!--      <smart-editor name="editor" placeholder="this is placeholder"></smart-editor>-->
    <!--    </smart-form-layout>-->
</template>

<script>

let options = [
    {value: 1, label: '区域1'}
    , {value: 2, label: '区域2'}
];


let tree1 = [
    {id: 1, label: '一级 1'}
    , {id: 4, pid: 1, label: '二级 1-1'}
    , {id: 9, pid: 4, label: '三级 1-1-1'}
    , {id: 2, pid: 4, label: '一级 2'}
];

let tree2 = [
    {id: 1, label: '一级 1'}
    , {id: 4, pid: 1, label: '二级 1-1'}
    , {id: 9, pid: 4, label: '三级 1-1-1'}
    , {id: 2, pid: 4, label: '一级 2'}
];

export default {
    components: {},
    data() {
        return {
            options: options,
            tree1: tree1,
            tree2: tree2,
            model: {
                text: '',
                hidden: '',
                number: '',
                textarea: '',
                switch: '',
                checkbox: '',
                select: '',
                radio_group: '',
                checkbox_group: '',
                date: '',
                data_range: ''
            }
            // model: [
            //     {name: 'text', label: '文本'}
            //     , {name: 'hidden', label: '隐藏组件'}
            //     , {name: 'number', label: '数字'}
            //     , {name: 'textarea', label: '文本域'}
            //     , {name: 'switch', label: '开关'}
            //     , {name: 'checkbox', label: '开关'}
            //     , {name: 'select', label: '选择'}
            //     , {name: 'radio_group', label: '单选'}
            //     , {name: 'checkbox_group', label: '复选'}
            //
            //     , {name: 'date', label: '日期'}
            //     , {name: 'data_range', label: '日期'}
            // ]
        }
    },

    mounted() {
        this.$nextTick(() => {
            console.log('-------------------------------------------------------------')
            // console.log(this.$refs.form.serialize());
            console.log('-------------------------------------------------------------')
        })
    },
    methods: {
        /**
         * 数据联动触发器
         *
         * @param name  字段名
         * @param value 值
         * @param formGroup {FastForm}
         */
        trigger: function (name, value, formGroup) {
            console.log(name + ' - ' + value);
            // let editor = this.$layers.fetch(formGroup, e => e.name === 'editor');
            // console.log('==============================================================')
            // console.log(editor.getValue());
            // console.log('==============================================================')
        },
        onSubmit: function (data) {
            console.log(data);
            return false;
        },
        onReset: function () {
            this.$refs.form.reset();
        },
        onChange: function (val) {
            console.log(val);
        }
    }
}
</script>
